import { Canvas, Story, Meta } from "@storybook/blocks";
import { Icon } from "metabase/ui";
import { Button, Flex, Text } from "metabase/ui";
import { Menu } from "./";
import * as MenuStories from "./Menu.stories";

<Meta of={MenuStories} />

# Menu

Our themed wrapper around [Mantine Menu](https://v6.mantine.dev/core/menu/).

## When to use Menu

Use this menu in the following cases:

- To display a list (up to 10) of static actions
- Use it as the primary menu without additional flyout popups
- Examples: + New, Settings, More on Metabase’s main UI

Not to use:

- As filter popup, selector or multi-selector
- GUI editor dropdowns
- Dynamic and composite menu items, e.g., group by month
- Dynamic dropdown for table column picker
- Any other advanced popups such as column popup on chill mode

## Docs

- [Figma File](https://www.figma.com/file/MZhwfwmOaa8HeCBBUCeq7R/Menu?type=design&node-id=1-96&mode=design&t=vj3dPYMbYVYVuKBy-0)
- [Mantine Menu Docs](https://v6.mantine.dev/core/menu/)

## Caveats

- The position of menu is auto-programmed responsively according to the location of the trigger button on the page
- Limit the menu items to 10 or fewer

## Usage guidelines

- Although menu item label can be as long as you wish, keep it simple and concise
- In general, use sentence casing for menu item labels
- Use icon + label when applicable for better visual affordance

## Examples

<Canvas of={MenuStories.Default} />

### Right section

<Canvas of={MenuStories.RightSection} />

### Icons

<Canvas of={MenuStories.Icons} />

### Labels and dividers

<Canvas of={MenuStories.LabelsAndDividers} />
